<template>
  <div>
    <header>
      <div class="container">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          router
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="/admin/">
            产品管理
          </el-menu-item>
          <el-menu-item index="/admin/auser/">
            用户管理
          </el-menu-item>
          <el-menu-item index="/admin/wxuser/">
            微信用户
          </el-menu-item>
          <el-menu-item index="/admin/case/">
            案例管理
          </el-menu-item>
          <el-menu-item index="/admin/article/">
            文章列表
          </el-menu-item>
          <el-menu-item index="/admin/like/">
            点赞列表
          </el-menu-item>
          <el-menu-item index="/admin/collect/">
            收藏列表
          </el-menu-item>
          <el-menu-item index="/admin/share/">
            转发列表
          </el-menu-item>
          <el-menu-item index="/admin/comment/">
            评论列表
          </el-menu-item>
        </el-menu>
      </div>
    </header>
    <div class="container mt30">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeIndex: ''
    }
  },
  mounted () {
    this.activeIndex = sessionStorage.getItem('activeIndex') ? sessionStorage.getItem('activeIndex') : '/admin/'
  },
  methods: {
    handleSelect (key) {
      this.activeIndex = key
      sessionStorage.setItem('activeIndex', key)
    }
  }
}
</script>
<style lang="sass">
.container
  max-width: 1200px
  margin: 0 auto
  padding: 0 10px
  &.mt30
    margin-top: 20px
    @media (min-width: 760px)
      margin-top: 30px
header
  background-color: #545c64
  color: #fff
  .container
    height: 60px
</style>
